<template>
<!--  style="height:calc(100% - 152px)" -->
  <div>
    <div v-if="isEmpty" class="sla-empty">
      <div>
        <img src="../../../../assets/img/slaEmpty.png" alt="">
        <div style="margin-top: 16px">暂无内容</div>
      </div>
    </div>
    <div v-else class="SLA-detail">
      <div class="title" style="margin-top:11px">
        <i class="iconfont V7_iconfont V7_iconjinhangzhong"></i>
       <span style="margin-left:8px">进行中的SLA</span>
      </div>
      <div class="card-container">
        <div class="card" v-for="(item, index) in cardList" :key="index">
          <div class="card-title">
            {{item.slaName}}
              <el-popover
                trigger="hover"
                placement="top-start"
                :visible-arrow="true"
                popper-class="custom-popover"
                >
                <div class="popover">
                  <div class="title">基本信息</div>
                  <el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">SLA名称</el-col>
                      <el-col :span="20" class="content-desc">{{item.slaName}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">描述</el-col>
                      <el-col :span="20" class="content-desc">{{item.slaDesc}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">开始条件</el-col>
                      <el-col :span="20" class="content-desc">当
                        <span class="triggerEvent">{{conditionMap[item.startCondition.triggerEvent]}}</span>
                        <span class="nodeList">{{nodeMap[item.startCondition.node] ? nodeMap[item.startCondition.node].name : ''}}</span>
                        时
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">结束条件</el-col>
                      <el-col :span="20" class="content-desc">当
                        <span class="triggerEvent">{{conditionMap[item.endCondition.triggerEvent]}}</span>
                        <span class="nodeList">{{nodeMap[item.endCondition.node] ? nodeMap[item.endCondition.node].name : ''}}</span>
                        时
                      </el-col>
                    </el-row>
                  </el-row>
                  <div class="title timing">时效设置</div>
                    <el-row>
                      <el-col :span="4" class="content-title">生效指标</el-col>
                      <el-col :span="20" class="content-desc">{{item.effectFiltersString | effectFilters}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">计时规则</el-col>
                      <el-col :span="20" class="content-desc">在{{item.timeLimitedConfig.timingRule.name}}规则下</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">处理时长</el-col>
                      <el-col :span="20" class="content-desc">
                        {{item.timeLimitedConfig.timingRule.daySum === 0 ? '' : `${item.timeLimitedConfig.timingRule.daySum}天`}}
                        {{item.timeLimitedConfig.timingRule.hourSum === 0 ? '' : `${item.timeLimitedConfig.timingRule.hourSum}小时`}}
                        {{item.timeLimitedConfig.timingRule.minuteSum === 0 ? '' : `${item.timeLimitedConfig.timingRule.minuteSum}分钟`}}
                        <div v-if="item.timeLimitedConfig.timingRule.dateTarget">以{{getfieldSimple(item.timeLimitedConfig.timingRule.fieldSimple.businessId)}}为准</div>
                      </el-col>
                    </el-row>
                </div>
                <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42" slot="reference"></i>
              </el-popover>
          </div>
          <div class="card-detail">
            <div>
              超时情况:
              <span :class="{overtime: item.isOverTime === '已超时', 'not-overtime': item.isOverTime === '未超时'}">{{item.isOverTime}}</span>
            </div>
            <div>
              开始时间：{{item.startTime}}
            </div>
          </div>
          <div class="card-detail">
            <div>
              {{item.isOverTime === '已超时' ? '超时时间' : '距离到期'}}：{{item.remaingTime}}
            </div>
            <div>
              到期时间：{{item.dueTime}}
            </div>
          </div>
        </div>
      </div>
      <div class="title" style="margin-top:0">
        <i class="iconfont V7_iconfont V7_iconyouxiaozhishi"></i>
        <span style="margin-left:8px">SLA匹配记录</span>
      </div>
      <el-timeline>
        <el-timeline-item
          class="timieline"
          v-for="(item, index) in matcheRecords"
          :key="index"
          color="#008BEE"
          >
          <div>
            <div class="timeline-tittle">
              {{item.slaName}}
              <el-popover
                trigger="hover"
                placement="top-start"
                :visible-arrow="true"
                popper-class="custom-popover"
                >
                <div class="popover">
                  <div class="title">基本信息</div>
                  <el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">SLA名称</el-col>
                      <el-col :span="20" class="content-desc">{{item.slaName}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">描述</el-col>
                      <el-col :span="20" class="content-desc">{{item.slaDesc}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">开始条件</el-col>
                      <el-col :span="20" class="content-desc">当
                        <span class="triggerEvent">{{conditionMap[item.startCondition.triggerEvent]}}</span>
                        <span class="nodeList">{{nodeMap[item.startCondition.node] ? nodeMap[item.startCondition.node].name : ''}}</span>
                        时
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">结束条件</el-col>
                      <el-col :span="20" class="content-desc">当
                        <span class="triggerEvent">{{conditionMap[item.endCondition.triggerEvent]}}</span>
                        <span class="nodeList">{{nodeMap[item.endCondition.node] ? nodeMap[item.endCondition.node].name : ''}}</span>
                        时
                      </el-col>
                    </el-row>
                  </el-row>
                  <div class="title timing">时效设置</div>
                    <el-row>
                      <el-col :span="4" class="content-title">生效指标</el-col>
                      <el-col :span="20" class="content-desc">{{item.effectFiltersString | effectFilters}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">计时规则</el-col>
                      <el-col :span="20" class="content-desc">在{{item.timeLimitedConfig.timingRule.name}}规则下</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4" class="content-title">处理时长</el-col>
                      <el-col :span="20" class="content-desc">
                        {{item.timeLimitedConfig.timingRule.daySum === 0 ? '' : `${item.timeLimitedConfig.timingRule.daySum}天`}}
                        {{item.timeLimitedConfig.timingRule.hourSum === 0 ? '' : `${item.timeLimitedConfig.timingRule.hourSum}小时`}}
                        {{item.timeLimitedConfig.timingRule.minuteSum === 0 ? '' : `${item.timeLimitedConfig.timingRule.minuteSum}分钟`}}
                        <div v-if="item.timeLimitedConfig.timingRule.dateTarget">以{{getfieldSimple(item.timeLimitedConfig.timingRule.fieldSimple.businessId)}}为准</div>
                      </el-col>
                    </el-row>
                </div>
                <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42" slot="reference"></i>
              </el-popover>
            </div>
            <div class="timeout">
              超时情况：
              <span :class="{obsolete: item.timeoutInof === '已作废', 'not-overtime': item.timeoutInof === '未超时', 'overtime': item.timeoutInof !== '未超时' && item.timeoutInof !== '已作废'}">{{item.timeoutInof}}</span>
            </div>
            <div class="time begin">开始时间：{{item.startTime}}</div>
            <div class="time">结束时间：{{item.endTime}}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'

@Component({
  name: 'sla',
  components: {
  },
  filters: {
    effectFilters (val) {
      return val.replace(/<br>/g, '\r\n')
    }
  }
})
export default class SLADetail extends Vue {
  [x: string]: any
  @Prop({ default: '' }) public modelId!: string
  @Prop({ default: '' }) public orderId!: string
  @Prop({ default: [] }) public fieldList!: any
  private cardList = []
  private matcheRecords = []
  private popover = false
  private conditionMap = {
    1: '进入节点',
    2: '离开节点',
    3: '工单终止',
    4: '工单完成',
    5: '工单被转派',
    6: '工单被领取',
    7: '工单被催办'
  }

  private nodeMap: any = {}
  private get isEmpty () {
    return this.cardList.length === 0 && this.matcheRecords.length === 0
  }

  private getfieldSimple (businessId) {
    const fieldSimple = this.fieldList.find(item => item.businessId === businessId)
    if (fieldSimple) {
      return fieldSimple.name
    }
  }

  private getSLA () {
    const nodeMapRes = commonAction({ url: '/server-flow/action/definition/userTask?modelId=' + this.modelId, method: 'get' })

    const slaListRes = commonAction({
      url: '/server-work/action/sla/record/list',
      method: 'post',
      data: { modelId: this.modelId, orderId: this.orderId }
    })
    Promise.all([nodeMapRes, slaListRes]).then(res => {
      const res1 = res[0]
      const res2 = res[1]
      if (res1.success) {
        res1.data.forEach(item => {
          this.nodeMap[item.id] = item
        })
      }
      if (res2.success) {
        if (res2.data.doingList) {
          this.cardList = res2.data.doingList.map(item => {
            let now = +new Date()
            const due = +new Date(item.dueTime.replace(/-/g, '/'))
            if (item.endTime) {
              now = +new Date(item.endTime.replace(/-/g, '/'))
            }
            item.remaingTime = this.getTimeInterval(now, due)
            item.isOverTime = (now - due) > 0 ? '已超时' : '未超时'
            return item
          })
        }
        if (res2.data.doneList) {
          this.matcheRecords = res2.data.doneList.map(item => {
            let now = +new Date()
            const due = +new Date(item.dueTime.replace(/-/g, '/'))
            if (item.endTime) {
              now = +new Date(item.endTime.replace(/-/g, '/'))
            }
            item.timeoutInof = this.getTimeoutInfo(item.processStatus, now, due)
            return item
          })
        }
      }
    })
  }

  private getTimeInterval (start, end) {
    const now = +new Date(start)
    const due = +new Date(end)
    const day = 1000 * 60 * 60 * 24
    const hour = 1000 * 60 * 60
    const minute = 1000 * 60
    let dayNum = 0
    let hourNum = 0
    let minuteNum = 0
    if (due >= now) {
      dayNum = Math.floor((due - now) / day)
      hourNum = Math.floor((due - now - dayNum * day) / hour)
      minuteNum = Math.ceil((due - now - dayNum * day - hourNum * hour) / minute)
    } else {
      dayNum = Math.floor((now - due) / day)
      hourNum = Math.floor((now - due - dayNum * day) / hour)
      minuteNum = Math.ceil((now - due - dayNum * day - hourNum * hour) / minute)
    }
    const dayStr = dayNum === 0 ? '' : `${dayNum}天`
    const hourStr = hourNum === 0 ? '' : `${hourNum}小时`
    const minuteStr = minuteNum === 0 ? '' : `${minuteNum}分钟`
    return `${dayStr}${hourStr}${minuteStr}`
  }

  private getTimeoutInfo (processStatus, now, due) {
    if (processStatus === 4) {
      return '已作废'
    } else {
      if (now - due > 0) {
        const str = this.getTimeInterval(now, due)
        return `超时${str}`
      } else {
        return '未超时'
      }
    }
  }

  private created () {
    this.getSLA()
  }
}
</script>

<style lang="stylus" scoped>
.custom-popover
  border none
.sla-empty
  text-align: center
  display:flex;
  align-items: center;
  justify-content: center;
  margin-top: 5%
.popover
  height: 360px
  width 500px
  padding 0 12px 12px 12px
  .title
    margin-bottom 8px
    font-weight: 500;
    font-size: 14px;
    line-height: 40px;
    color: #303753
    border-bottom 1px solid  #F2F3F4;
  .content-title
    font-weight: 400;
    font-size: 12px;
    line-height: 35px;
    color: #767E91;
  .content-desc
    line-height: 35px
    .triggerEvent
      color: #008BEE
    .nodeList
      font-weight 500
      color: #303753
.SLA-detail
  font-family: 'PingFang SC';
  font-style: normal;
  .V7_iconV7tubiao_bangzhu-42:hover
    color #008BEE
  .V7_iconV7tubiao_bangzhu-42
    color:#B3B9C7
    font-size:12px
  .timing
    margin-top 4px
  .title
    margin: 24px 0
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #303753;
    display: flex
    align-items: center
    .V7_iconfont
      color: #008BEE
  .card-container
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    .card
      border: 1px solid #ECF0F3
      height: 110px
      padding: 16px
      flex-basis: calc(50% - 12px)
      border-radius: 4px
      margin-bottom: 24px
      .card-title
        font-weight: 500;
        font-size: 14px;
        color: #303753;
        margin-bottom 17px
      .card-detail
        display: flex
        justify-content: space-between
        margin-bottom 10px
        .overtime
          color: #FC6B5C
          border 1px solid #FC6B5C
          margin-left: 5px;
          display: inline-block;
          padding: 5px;
          line-height: 8px;
          font-weight: 400;
          border-radius: 4px;
        .not-overtime
          color: #2ED47A
          border 1px solid #2ED47A
          margin-left: 5px;
          display: inline-block;
          padding: 5px;
          line-height: 8px;
          font-weight: 400;
          border-radius: 4px;
  .timieline
    /deep/.el-timeline-item__node--normal
      left 2px
      height: 6px
      width 6px
    /deep/.el-timeline-item__wrapper
      padding-left 18px
    .timeline-tittle
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      height: 20px
      color: #303753;
    .timeout
      font-size: 12px;
      margin 8px 0
      color: #303753;
      font-weight: 500
    .obsolete
      color: #B3B9C7
    .overtime
      color: #FC6B5C
    .not-overtime
      color: #2ED47A
    .time
      font-weight: 400;
      font-size: 12px;
      color: #767E91;
    .begin
      margin-bottom 4px
</style>
